<template>
    <div>
      <!--面包屑-->
      <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!--卡片-->
      <el-tabs type="border-card">
        <el-tab-pane label="2018届">
          <el-tabs :tab-position="tabPosition" style="height: 200px;">
            <el-tab-pane label="班级内学生">
              <el-table
                  :data="tableData"
                  height="250"
                  border
                  style="width: 70%;position: relative;left: 15%;">
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="student_number"
                    label="学号"
                    width="120">
                </el-table-column>
                <el-table-column
                  prop="direction"
                  label="学习方向"
                  width="200">
                </el-table-column>
                <el-table-column
                    prop="course"
                    label="课程"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="score"
                    label="成绩"
                    width="120">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="嵌入式系统方向">2018嵌入式系统方向学生成绩表</el-tab-pane>
            <el-tab-pane label="应用端软件方向">2018应用端软件方向学生成绩表</el-tab-pane>
            <el-tab-pane label="报名学生">2018报名学生成绩</el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="2019届">
          <el-tabs :tab-position="tabPosition" style="height: 200px;">
            <el-tab-pane label="班级内学生">2019班级内学生成绩表</el-tab-pane>
            <el-tab-pane label="嵌入式系统方向">2019嵌入式系统方向学生成绩表</el-tab-pane>
            <el-tab-pane label="应用端软件方向">2019应用端软件方向学生成绩表</el-tab-pane>
            <el-tab-pane label="报名学生">2019报名学生成绩</el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="2020届">
          <el-tabs :tab-position="tabPosition" style="height: 200px;">
            <el-tab-pane label="班级内学生">2020班级内学生成绩表</el-tab-pane>
            <el-tab-pane label="嵌入式系统方向">2020嵌入式系统方向学生成绩表</el-tab-pane>
            <el-tab-pane label="应用端软件方向">2020应用端软件方向学生成绩表</el-tab-pane>
            <el-tab-pane label="报名学生">2020报名学生成绩</el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "grade_manegement",
        data(){
          return{
            tabPosition: 'right',
            tableData: [{
              name: '彭锦红',
              student_number: '08090118304',
              direction: '嵌入式系统方向',
              course: 'Linux操作系统',
              score: 0
            }]
          }
        }
    }
</script>

<style scoped>

</style>
